<template>
    <div class="modal-edit-box">      
        <Form :model="configForm" :rules="rules" ref="tenantConfForm" :label-width="120">
            <Row class="code-row-bg">
                <Col span="24" style="border:none;">
                    <Form-item :label="$t('module.tenantManage.name')" prop="name">
                        <AutoComplete
                          v-model="configForm.name"
                          :data="configList"
                          :filter-method="querySearch"
                          :placeholder="$t('module.tenantManage.inputName')">
                        </AutoComplete>
                    </Form-item>
                </Col>
            </Row>
            <Row class="code-row-bg">
                <Col span="24" style="border:none;">
                    <Form-item :label="$t('module.tenantManage.value')" prop="value">
                        <Input :placeholder="$t('module.tenantManage.inputValue')"
                            v-model="configForm.value"
                            :maxlength="200"
                            ></Input>
                    </Form-item>
                </Col>
            </Row>
            <Row class="code-row-bg">
                <Col span="24" style="border:none;">
                    <Form-item :label="$t('module.tenantManage.remark')" prop="remark">
                        <Input :placeholder="$t('module.tenantManage.inputRemark')"
                            type="textarea"
                            :autosize="{minRows: 2,maxRows: 5}"
                            v-model="configForm.remark"
                            :maxlength="200"
                            ></Input>
                    </Form-item>
                </Col>
            </Row>
        </Form>
    </div>   
</template>
<script>
    import { addConfig,editConfig } from '@api/flowable/tenantManage.js'
    export default {
        name:'addKey',
        props: {
            configInfo: {
                type:Object,
                default(){
                    return {}
                }
            },
            tenantInfo: {
                type:Object,
                default(){
                    return {}
                }
            }
        },
        data(){
            const validateName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error(this.$t('module.tenantManage.inputName')))
                } else if (value.length > 100) {
                    callback(new Error(this.$t('module.tenantManage.inputNameLengthError')))
                } else if (value != value.trim()) {
                    callback(new Error(this.$t("module.tenantManage.inputNameCodeNoBlank")));
                }
                callback()
            }
            return {
                configList: ['center_url', 'ripplesmgt_url', 'third_tenant_menu'],
                configForm:{
                    name: this.configInfo.name,
                    value: this.configInfo.value,
                    remark:this.configInfo.remark
                },
                
                rules: {
                    name: [{required: true, trigger: 'blur,change', validator: validateName}],
                    value: [{required: true, message: this.$t('module.tenantManage.inputValue'), trigger: 'blur'}]
                },
                actions: [
                    {
                    text: this.$t('common.save'),
                    theme: 'primary',
                    handle: () => {
                        this.save()
                    },
                    loading: false
                    },
                    {
                    text: this.$t('common.close'),
                    handle: () => {
                        this.$emit('Close')
                    }
                    }
                ]
            }
        },
        created(){
            let titleText
            if(this.configInfo.id) {
                titleText = this.$t('common.edit')
            }else{
                titleText = this.$t('common.create')
            }
            this.$emit('SetTitle', titleText)
            this.$emit('SetPageActions', this.actions)
        },
        methods: {
            querySearch(value, option) {
                // var results = this.configList
                // 调用 callback 返回建议列表的数据
                // cb(results);
                return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
            },
            _processServiceResponse(res, promputText) {
                this.actions[0].loading = false
                if (res) {
                    this.$Message.success({
                    content: promputText,
                    duration: 3
                    })

                    //关闭当前窗口
                    this.$emit('Close', this.configForm)
                }
            },
            save(){
                this.$refs['tenantConfForm'].validate(valid => {
                    if(valid){
                        this.actions[0].loading = true
                        let process = this._processServiceResponse.bind(this),
                            configForm = this.configForm,
                            id = this.configInfo.id
                        configForm.tenantId = this.tenantInfo.tenantId
                        if(id){
                            configForm.id = id
                            editConfig(configForm)
                            .then(res => process(res, this.$t('common.updateSuccess')))
                            .catch(err => (this.actions[0].loading = false))
                        }else{
                            addConfig(configForm)
                            .then(res => process(res, this.$t('common.createSuccess')))
                            .catch(err => (this.actions[0].loading = false))
                        }                      
                    }
                })
            }
        }
    }
</script>

<style lang="less">
    .el-input__inner{
        border-radius: 0!important;
        height: 34px;
        line-height: 34px;
        padding: 1px 7px;
    }
    .el-autocomplete{
        width: 100%;
    }
    // .ivu-row{
    //     margin-bottom: 0!important;
    // }
    .el-input.is-active .el-input__inner, .el-input__inner:focus{
        border-color: #c0c4cc!important;
    }
    .el-input.is-active .el-input__inner, .el-input__inner:focus{
        border-color: #c0c4cc!important;
    }
    .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus{
        border-color: #c0c4cc!important;
    }
</style>
